<template>
	<view class="box">
		<view class="header">
			<view class="top">
				<view class="toptext">
					会员中心
				</view>
				<image src="https://s1.ax1x.com/2022/11/24/zGX3M4.png" mode="" @click="setting"></image>
			</view>
			<view class="user">
				<image @click="setting" :src="IMGURL+photo" mode=""></image>
				<view class="tol">
					<text>{{mobile}}</text>
					<view class="sgs">
						<image  src="https://s1.ax1x.com/2022/11/24/zGvkHs.png" mode=""></image>
						<!-- <image v-else :src="IMGURL+userInfo.photo" mode=""></image> -->
						<text>已认证</text>
					</view>
				</view>
			</view>
		</view>
		<view class="nav">
			<view class="moudle"  @click="$utils.toPage('/pages/mine/house/house')">
				<image src="https://s1.ax1x.com/2022/11/24/zGvEEn.png" mode="widthFix"></image>
				<view>我的房屋</view>
			</view>
			<view class="moudle"  @click="$utils.toPage('/pages/mine/cat/cat')">
				<image src="https://s1.ax1x.com/2022/11/24/zGvZ40.png" mode="widthFix"></image>
				<view>我的车辆</view>
			</view>
			<view class="moudle" @click="$utils.toPage('/pages/mine/fee/fee')">
				<image src="https://s1.ax1x.com/2022/11/24/zGvQu4.png" mode="widthFix"></image>
				<view>我的缴费</view>
			</view>
			<view class="moudle" @click="$utils.toPage('/pages/mine/member/member')">
				<image src="https://s1.ax1x.com/2022/11/24/zGv8ER.png" mode="widthFix"></image>
				<view>家庭成员</view>
			</view>
		</view>
		<view class="kong"></view>
		<view class="btm">
			<ul>
				<li class="one">
					<view class="left">
						<image src="https://s1.ax1x.com/2022/11/24/zJE2RJ.png" mode=""></image>
						<text>报修记录</text>
					</view>
					<view class="right">
						<image src="https://s1.ax1x.com/2022/11/24/zJVRk8.png" mode=""></image>
					</view>
				</li>
				<li>
					<view class="left">
						<image src="https://s1.ax1x.com/2022/11/24/zJVvp4.png" mode=""></image>
						<text>反馈记录</text>
					</view>
					<view class="right">
						<image src="https://s1.ax1x.com/2022/11/24/zJVRk8.png" mode=""></image>
					</view>
				</li>
				<li>
					<view class="left">
						<image src="https://s1.ax1x.com/2022/11/24/zJVzc9.png" mode=""></image>
						<text>联系物业</text>
					</view>
					<view class="right">
						<image src="https://s1.ax1x.com/2022/11/24/zJVRk8.png" mode=""></image>
					</view>
				</li>
				<li>
					<view class="left">
						<image src="https://s1.ax1x.com/2022/11/24/zJZSXR.png" mode=""></image>
						<text>账号设置</text>
					</view>
					<view class="right">
						<image src="https://s1.ax1x.com/2022/11/24/zJVRk8.png" mode=""></image>
					</view>
				</li>
				
			</ul>
		</view>
	</view>
</template>

<script>
	import {IMG} from '../utils/cofing.js'
	export default{
		data(){
			return{
				IMGURL:IMG,
				photo:'',
				mobile:""
			}
		},
		onShow(){
			this.$utils.checkHouseState()
			let userInfo = uni.getStorageSync("userInfo")
			this.photo = userInfo.photo
			this.mobile = userInfo.mobile
		},
		methods:{
			setting(){
				uni.navigateTo({
					url:'./setting/setting'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	li{
		list-style: none;
	}
	.header{
		width: 100%;
		height: 405rpx;
		background-image: url("https://s1.ax1x.com/2022/11/24/zGXAMQ.png");
		background-size: 100%;
		display: flex;
		flex-wrap: wrap;
		.top{
			width: 100%;
			height: 65rpx;
			display: flex;
			justify-content: space-evenly;
			margin-top: 95rpx;
			.toptext{
				font-size: 38rpx;
				color: #fff;
				margin-left: 210rpx;
			}
			image{
				width: 48rpx;
				height: 48rpx;
				margin-left: 50rpx;
			}
		}
		.user{
			width: 100%;
			height: 245rpx;
			display: flex;
			image{
				width: 115rpx;
				height: 115rpx;
				border-radius: 50%;
				margin-left: 46rpx;
				margin-top: 44rpx;
				margin-right: 47rpx;
			}
			.tol{
				width: 350rpx;
				height: 115rpx;
				margin-top: 43rpx;
				text{
					display: block;
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #fff;
				}
				.sgs{
					width: 130rpx;
					height: 40rpx;
					border: 1rpx solid #ffffff;
					border-radius: 50rpx;
					margin-top: 20rpx;
					display: flex;
					position: relative;
					image{
						width: 30rpx;
						height: 30rpx;
						margin-left: 10rpx;
						margin-top: 5rpx;
						position: absolute;
						right: 48rpx;
						top: 2rpx;
					}
					text{
						font-size: 16rpx;
						color: #fff;
						// width: 92rpx !important;
						line-height: 20rpx;
						margin-left: 40rpx;
					}
				}
			}
		}
	}
	.nav{
		width: 100%;
		height: 260rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
		.moudle image{
			width: 60rpx;
		}
		.moudle view{
			font-size: 22rpx;
			color: #10315e;
			margin-top: 10rpx;
		}
	}
	.kong{
		width: 100%;
		height: 20rpx;
		background-color: #f6f6f6;
	}
	.btm ul .one{
		margin-top:30rpx;
	}
	.btm ul li{
		width: 720rpx;
		height: 93rpx;
		border-bottom: 2rpx solid #eeeeee;
		margin-left: 30rpx;
		display: flex;
		justify-content: space-between;
		.left{
			width: 200rpx;
			height: 100%;
			display:flex;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-top:30rpx;
				margin-left: 10rpx;
				margin-right: 15rpx;
			}
			text{
			line-height: 94rpx;
			font-size: 26rpx;
			color:#666666;
			}
		}
		.right{
			width: 30rpx;
			height: 30rpx;
			image{
				width: 15rpx;
				height: 25rpx;
				margin-top: 35rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>